<template>
    <el-form :model="user_info" label-position="top" size="large" :rules="rules" ref="user_info_form">
        <el-tabs v-model="ActiveTab">
            <el-scrollbar style="height: calc(100vh - 165px)">
                <el-tab-pane label="基本信息" name="基本信息">
                <el-row justify="center" style="margin-top: 50px">
                    <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
                        <el-row justify="space-evenly">
                            <el-col :span="6">
                                <el-form-item label="姓名" prop="t_name">
                                    <el-input v-model="user_info.t_name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="性别" prop="t_sex">
                                    <el-radio-group v-model="user_info.t_sex">
                                        <el-radio-button label="男"></el-radio-button>
                                        <el-radio-button label="女"></el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row justify="space-evenly">
                            <el-col :span="6">
                                <el-form-item label="出生年月" prop="t_birth">
                                    <el-date-picker v-model="user_info.t_birth" type="date"
                                                    placeholder="请选择..." value-format="YYYY-MM-DD"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="籍贯" prop="t_native">
                                    <el-input v-model="user_info.t_native"></el-input>
                                </el-form-item>
                            </el-col>

                        </el-row>
                        <el-row justify="space-evenly">
                            <el-col :span="6">
                                <el-form-item label="民族" prop="t_nation">
                                    <el-select v-model="user_info.t_nation" placeholder="请选择...">
                                        <el-option v-for="item of ethnic_group" :key="item" :value="item"
                                                   :label="item"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="政治面貌" prop="t_political">
                                    <el-select v-model="user_info.t_political" placeholder="请选择...">
                                        <el-option v-for="item of political_status_group" :key="item" :value="item"
                                                   :label="item"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                        </el-row>
                        <el-row justify="space-evenly">
                            <el-col :span="6">
                                <el-form-item label="所在专业部" prop="t_depart">
                                    <el-input v-model="user_info.t_depart"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="现职称及聘任时间" prop="t_rank">
                                    <el-input v-model="user_info.t_rank"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row justify="space-evenly">
                            <el-col :span="6">
                                <el-form-item label="教师资格证书" prop="t_qualify">
                                    <el-input v-model="user_info.t_qualify"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="学历学位" prop="t_degree">
                                    <el-input v-model="user_info.t_degree"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row justify="space-evenly">
                            <el-col :span="6">
                                <el-form-item label="职业（工种）等级" prop="t_worktype">
                                    <el-input v-model="user_info.t_worktype"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="其他证书">
                                    <el-input v-model="user_info.t_others"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                </el-tab-pane>
                <el-tab-pane label="教育经历" name="教育经历">
                    <el-row justify="center" style="margin: 50px 0">
                        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
                            <el-alert title="请填写大学以上教育经历" :closable="false" type="warning" show-icon/>
                        </el-col>
                    </el-row>
                    <el-row justify="center">
                        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
                            <el-row justify="space-between" v-for="(item, index) of user_info.t_edu_list">
                                <el-col :span="24">
                                    <el-row justify="space-between">
                                        <el-col :span="6">
                                            <el-form-item label="时间" :prop="'t_edu_list.' + index + '.edu_period'" :rules="{required: true, message: '请选择-教育经历-时间', trigger: 'blur'}">
                                                <el-date-picker v-model="item.edu_period" type="daterange" range-separator="至"
                                                                start-placeholder="开始时间" end-placeholder="结束时间"
                                                                style="max-width: 100%" value-format="YYYY-MM-DD"></el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="学校名称" :prop="'t_edu_list.' + index + '.edu_school'" :rules="{required: true, message: '请输入-教育经历-学校名称', trigger: 'blur'}">
                                                <el-input v-model="item.edu_school" placeholder="学校名称"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="专业名称" :prop="'t_edu_list.' + index + '.edu_profess'" :rules="{required: true, message: '请输入-教育经历-专业名称', trigger: 'blur'}">
                                                <el-input v-model="item.edu_profess" placeholder="专业名称"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="24">
                                    <el-row justify="space-between">
                                        <el-col :span="6">
                                            <el-form-item label="学位" :prop="'t_edu_list.' + index + '.edu_deg'" :rules="{required: true, message: '请输入-教育经历-学位信息', trigger: 'blur'}">
                                                <el-input v-model="item.edu_deg" placeholder="学位信息"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="学历" :prop="'t_edu_list.' + index + '.edu_rec'" :rules="{required: true, message: '请输入-教育经历-学历信息', trigger: 'blur'}">
                                                <el-input v-model="item.edu_rec" placeholder="请输入学历信息"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="是否全日制">
                                                <el-radio-group v-model="item.edu_fulltime">
                                                    <el-radio-button :label="true">是</el-radio-button>
                                                    <el-radio-button :label="false">否</el-radio-button>
                                                </el-radio-group>
                                                <el-button type="danger" style="position: absolute;right: 0" @click="remove_btn('education_experience', index)">删除此项</el-button>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <div class="line"></div>
                            </el-row>
                            <el-button class="add_btn" type="primary" @click="add_btn('education_experience')">添加</el-button>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="工作经历" name="工作经历">
                    <el-row justify="center" style="margin-top: 50px">
                        <el-col  :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
                            <el-row justify="space-between" v-for="(item, index) of user_info.t_exp_list">
                                <el-col :span="24">
                                    <el-row justify="space-between">
                                        <el-col :span="6">
                                            <el-form-item label="时间" :prop="'t_exp_list.' + index + '.work_period'" :rules="{required: true, message: '请选择-工作经历-时间', trigger: 'blur'}">
                                                <el-date-picker v-model="item.work_period" type="daterange" range-separator="至"
                                                                start-placeholder="开始时间" end-placeholder="结束时间"
                                                                style="max-width: 100%" value-format="YYYY-MM-DD"></el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="单位名称" :prop="'t_exp_list.' + index + '.work_comp'" :rules="{required: true, message: '请输入-工作经历-单位名称', trigger: 'blur'}">
                                                <el-input v-model="item.work_comp" placeholder="单位名称"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="职位" :prop="'t_exp_list.' + index + '.work_post'" :rules="{required: true, message: '请输入-工作经历-岗位信息', trigger: 'blur'}">
                                                <el-input v-model="item.work_post" placeholder="岗位信息"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="4">
                                            <el-button type="danger" style="margin-top: 34px" @click="remove_btn('work_experience', index)">删除此项</el-button>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <div class="line"></div>
                            </el-row>
                            <el-button class="add_btn" type="primary" @click="add_btn('work_experience')">添加</el-button>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-scrollbar>
        </el-tabs>
        <el-affix position="bottom" :offset="0">
            <el-button style="position: absolute;bottom: 50px;right: 10%" @click="submit" type="success" :loading="isLoading">提交 “教师个人基本信息”</el-button>
        </el-affix>
    </el-form>
</template>

<script>
import {ElLoading, ElMessage} from "element-plus";
import useStore from "@/store/store";
const store = useStore()
export default {
    name: "user_info",
    data() {
        return {
            user_info: {
                t_name: '',                         // 姓名
                t_sex: '男',                        // 性别
                t_birth: '',                        // 出生年月
                t_native: '',                       // 籍贯
                t_nation: '',                       // 民族
                t_political: '',                    // 政治面貌
                t_depart: '',                       // 所在专业部
                t_rank: '',                         // 职称
                t_qualify: '',                      // 教师资格证书
                t_degree: '',                       // 学历学位
                t_worktype: '',                     // 职业(工种)等级
                t_others: '',                       // 其他证书
                t_edu_list: [                       // 大学以上教育经历
                    {
                        user_id: store.user_id,
                        edu_period: [],             // 时间
                        edu_school: '',             // 学校名称
                        edu_profess: '',            // 专业名称
                        edu_deg: '',                // 学位
                        edu_rec: '',                // 学历
                        edu_fulltime: true          // 是否全日制
                    },
                ],
                t_exp_list: [                       // 工作经历
                    {
                        user_id: store.user_id,
                        work_period: [],            // 时间
                        work_comp: '',              // 单位名称
                        work_post: ''               // 岗位
                    }
                ],
            },
            rules: {
                t_name: [
                    {required: true, message: '请输入-基本信息-姓名', trigger: 'blur'}
                ],
                t_sex: [
                    {required: true, message: '请选择-基本信息-性别', trigger: 'blur'}
                ],
                t_birth: [
                    {required: true, message: '请选择-基本信息-出生日期', trigger: 'blur'}
                ],
                t_native: [
                    {required: true, message: '请输入-基本信息-籍贯', trigger: 'blur'}
                ],
                t_nation: [
                    {required: true, message: '请选择-基本信息-民族', trigger: 'blur'}
                ],
                t_political: [
                    {required: true, message: '请选择-基本信息-政治面貌', trigger: 'blur'}
                ],
                t_depart: [
                    {required: true, message: '请输入-基本信息-所在专业部', trigger: 'blur'}
                ],
                t_rank: [
                    {required: true, message: '请输入-基本信息-职称', trigger: 'blur'}
                ],
                t_qualify: [
                    {required: true, message: '请输入-基本信息-教师资格证', trigger: 'blur'}
                ],
                t_degree: [
                    {required: true, message: '请输入-基本信息-学历学位', trigger: 'blur'}
                ],
                t_worktype: [
                    {required: true, message: '请输入-基本信息-职业(工种)等级', trigger: 'blur'}
                ]

            },
            political_status_group: ['中共党员', '中共预备党员', '共青团员', '民革党员', '民盟盟员', '民建会员', '民进会员', '农工党党员', '致公党党员', '九三学社社员', '台盟盟员', '无党派人士', '群众'],
            ethnic_group: [
                '汉族',
                '蒙古族',
                '回族',
                '藏族',
                '维吾尔族',
                '苗族',
                '彝族',
                '壮族',
                '布依族',
                '朝鲜族',
                '满族',
                '侗族',
                '瑶族',
                '白族',
                '土家族',
                '哈尼族',
                '哈萨克族',
                '傣族',
                '黎族',
                '傈僳族',
                '佤族',
                '畲族',
                '高山族',
                '拉祜族',
                '水族',
                '东乡族',
                '纳西族',
                '景颇族',
                '柯尔克孜族',
                '土族',
                '达斡尔族',
                '仫佬族',
                '羌族',
                '布朗族',
                '撒拉族',
                '毛南族',
                '仡佬族',
                '锡伯族',
                '阿昌族',
                '普米族',
                '塔吉克族',
                '怒族',
                '乌孜别克族',
                '俄罗斯族',
                '鄂温克族',
                '德昂族',
                '保安族',
                '裕固族',
                '京族',
                '塔塔尔族',
                '独龙族',
                '鄂伦春族',
                '赫哲族',
                '门巴族',
                '珞巴族',
                '基诺族'
            ],
            isLoading: false,
            ActiveTab: '基本信息'
        }
    },
    computed: {},
    methods:{
        add_btn(type){
            if (type === 'education_experience'){
                this.user_info.t_edu_list.push({
                    user_id: store.user_id,
                    edu_period: '',             // 时间
                    edu_school: '',             // 学校名称
                    edu_profess: '',            // 专业名称
                    edu_deg: '',                // 学位
                    edu_rec: '',                // 学历
                    edu_fulltime: true          // 是否全日制
                })
            }  else if (type === 'work_experience'){
                this.user_info.t_exp_list.push( {
                    user_id: store.user_id,
                    work_period: '',            // 时间
                    work_comp: '',              // 单位名称
                    work_post: ''               // 岗位
                })
            }
        },
        remove_btn(type, index){
            if (type === 'education_experience') {
                index !== -1 ? this.user_info.t_edu_list.splice(index, 1) : false
            }  else if (type === 'work_experience'){
                index !== -1 ? this.user_info.t_exp_list.splice(index, 1) : false
            }
        },
        // 主动校验表单信息
        submit() {
            this.$refs.user_info_form.validate((validate, message) => {
                if (!validate) {
                    this.ActiveTab = message[Object.keys(message)[0]][0].message.split('-')[1]
                    ElMessage.error(`表单验证未通过-> ${message[Object.keys(message)[0]][0].message}`)
                    return false
                }
                this.push()
            })
        },
        push() {
            this.isLoading = true
            this.user_info.type = "2002"
            this.user_info.user_id = store.user_id
            this.$api.pushUserInfoData(this.user_info).then(
                response => {
                    if (response.data.isSaved === true) {
                        ElMessage.success({
                            message: '教师个人基本信息提交成功！'
                        })
                    } else {
                        ElMessage.error({
                            message: '提交失败'
                        })
                    }
                    this.isLoading = false
                },
                error => {
                    console.log(error)
                    ElMessage.error({
                        message: error.message
                    })
                    this.isLoading = false
                }
            )
        }
    },
    // 挂载后钩子
    mounted() {
        const loading = ElLoading.service({
            target: document.querySelector('.el-main'),
            text: '请稍候...'
        })
        // 请求数据
        this.$api.pullUserInfoData(store.user_id).then(
            response => {
                this.user_info = response.data
                loading.close()
            },
            error => {
                console.log(error)
                ElMessage({
                    type: "error",
                    message: `${error.message}----请求数据失败，请手动输入`
                })
                loading.close()
            }
        )
    },
    // 不活动后钩子
    deactivated() {

    }
}
</script>

<style scoped>

</style>